/* Brand */
$brand-dark-primary: #7966F3;
$brand-light-primary: #9B9BFD;
$brand-primary: #A851E2;
$brand-accent: #17BEBB;
$brand-warn: #FB3640;

/* Background Colors */
$bg-color: #333;
$bg-color-inverse: #FFF;

/* Text Colors */
$text-color: #FFF;
$text-color-inverse: #333;
$secondary-text-color: #BABABA;

/* Border Colors */
$divider-color: lighten($bg-color, 20%);

/* Animation Language */
$transition-duration: 250ms;

/* Font Sizes */
$font-size: 1.6rem;
$font-size-h1: 4.6rem;
$font-size-h2: 3.6rem;
$font-size-h3: 2.8rem;
$font-size-h4: 2.2rem;
$font-size-h5: 1.8rem;
$font-size-h6: 1.6rem;

/* Font Size Factors */
$font-size-factor-tablet-landscape: 1.125;
$font-size-factor-large-desktop: 1.25;

/* Font Weights */
$font-weight: 300;
$font-weight-h1: 400;
$font-weight-h2: 400;
$font-weight-h3: 400;
$font-weight-h4: 400;
$font-weight-h5: 400;
$font-weight-h6: 700;

/* Line Heights */
$line-height: 1.6;
$line-height-h1: 1.2;
$line-height-h2: 1.25;
$line-height-h3: 1.3;
$line-height-h4: 1.35;
$line-height-h5: 1.5;
$line-height-h6: 1.4;

/* Letter Spacings */
$letter-spacing: .01em;
$letter-spacing-h1: -.1rem;
$letter-spacing-h2: -.1rem;
$letter-spacing-h3: -.1rem;
$letter-spacing-h4: -.08rem;
$letter-spacing-h5: -.05rem;
$letter-spacing-h6: -.1rem;

/* General */
$google-font: 'https://fonts.googleapis.com/css?family=Oxygen:300,400,700|Lato:300,400,700';
$font-family-headings: 'Oxygen', Helvetica, sans-serif;
$font-family: 'Lato', Helvetica, sans-serif;
$space-unit: 0.8rem;

/* Animations */
$fade-animation-transition: opacity $transition-duration * 4 ease-in-out;

/* Grid */
$screen-phone: 320px;
$screen-phone-max: $screen-phone - 1;
$screen-tablet-portrait: 768px;
$screen-tablet-portrait-max: $screen-tablet-portrait - 1;
$screen-tablet-landscape: 1024px;
$screen-tablet-landscape-max: $screen-tablet-landscape - 1;
$screen-small-desktop: 1200px;
$screen-small-desktop-max: $screen-small-desktop - 1;
$screen-large-desktop: 1440px;
$screen-large-desktop-max: $screen-large-desktop - 1;
$screen-phone-gutter: 16px;
$screen-tablet-portrait-gutter: $space-unit * 2;
$screen-tablet-landscape-gutter: $space-unit * 2;
$screen-small-desktop-gutter: $space-unit * 4;
$screen-large-desktop-gutter: $space-unit * 4;

/* AppNavBar*/
$nav-bar-bg: linear-gradient(to bottom, $bg-color 0%, lighten($bg-color, 2%) 50%, $bg-color 100%);
$nav-bar-color: $text-color;
$nav-bar-width: 100%;
$nav-bar-height: $space-unit * 10;
$nav-bar-padding: 0;
$nav-bar-index: 1000;
$nav-bar-bg-transition: opacity $transition-duration ease-in-out;
$nav-bar-bg-accent-transition: transform $transition-duration ease-in-out;
$nav-bar-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
$nav-bar-accent-bg: linear-gradient(to left, $brand-dark-primary 0%, $brand-primary 100%);
$nav-bar-accent-shadow: $nav-bar-shadow;
$nav-bar-hamburger-bg: $divider-color;
$nav-bar-menu-border-color: lighten($bg-color, 5%);
$nav-bar-menu-bg: transparent;

/* Button */
$button-font-family: $font-family;
$button-padding: $space-unit $space-unit * 2;
$button-margin: 0 $space-unit 0 0;
$button-min-width: $space-unit * 14;
$button-height: $space-unit * 6;
$button-font-size: inherit;
$button-font-weight: 400;
$button-border-radius: 0;
$button-shadow: 0 1px 3px rgba(0, 0, 0, 0.3), 0 1px 2px rgba(0, 0, 0, 0.4);
$button-transition: all 300ms cubic-bezier(.25, .8, .25, 1);
$button-active-shadow: 0 12px 20px rgba(0, 0, 0, 0.20), 0 10px 10px rgba(0, 0, 0, 0.18);

$button-default-color: #FFF;
$button-default-bg: linear-gradient(171deg, $divider-color 0%, lighten($divider-color, 5%) 100%);
$button-default-hover-bg: $button-default-bg;

$button-primary-color: #000;
$button-primary-bg: linear-gradient(171deg, $brand-primary 0%, lighten($brand-primary, 5%) 100%);
$button-primary-hover-bg: $button-primary-bg;

$button-accent-color: #000;
$button-accent-bg: linear-gradient(171deg, $brand-accent 0%, lighten($brand-accent, 5%) 100%);
$button-accent-hover-bg: $button-accent-bg;

$button-warn-color: #000;
$button-warn-bg: linear-gradient(171deg, $brand-warn 0%, lighten($brand-warn, 5%) 100%);
$button-warn-hover-bg: $button-warn-bg;

/* Loader */
$loader-size: $space-unit * 4;
$loader-medium-size: $space-unit * 8;
$loader-large-size: $space-unit * 16;

/* Panel */
$panel-bg: lighten($bg-color, 5%);
$panel-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
$panel-border-radius: 0;
$panel-margin: 0;

$panel-header-padding: $space-unit * 2;
$panel-header-image-size: $space-unit * 5;
$panel-header-image-border-radius: 50%;
$panel-header-image-margin: $space-unit $space-unit * 2 0 0;
$panel-header-title-font-size: inherit;
$panel-header-title-font-weight: 500;
$panel-header-subtitle-font-size: inherit;
$panel-header-subtitle-font-weight: 300;
$panel-header-subtitle-color: $secondary-text-color;

$panel-body-padding: $space-unit * 2;
$panel-body-font-size: inherit;
$panel-body-color: $text-color;

$panel-footer-padding: $space-unit * 2;

/* Input */
$input-border-bottom: 1px solid $divider-color;
$input-background-color: transparent;
$input-padding: $space-unit 0;
$input-margin: $space-unit * 3 0 $space-unit * 2;
$input-font-family: $font-family;
$input-font-size: inherit;
$input-color: $text-color;
$input-height: $space-unit * 4;

$input-placeholder-top: 0;
$input-placeholder-color: $input-color;
$input-placeholder-font-size: $input-font-size;
$input-placeholder-font-weight: $font-weight;
$input-placeholder-active-font-size: 75%;
$input-placeholder-active-font-weight: $font-weight;
$input-placeholder-active-font-color: $brand-accent;
$input-placeholder-active-height: $space-unit * 2;

$input-bar-height: 2px;
$input-bar-color: $brand-accent;

$input-message-height: $space-unit * 3;
$input-message-padding: $space-unit * 0.5 0 0 0;
$input-message-color: $input-color;
$input-message-font-size: 75%;
$input-message-font-weight: $font-weight;

/* Modal */
$modal-shadow: $nav-bar-shadow;
$modal-padding: $space-unit * 3;
$modal-index: 2001;
$modal-bg: $nav-bar-bg;
$modal-max-width: 480px;

/* Footer */
$footer-padding: $space-unit * 2 0 $space-unit * 2 0;
$footer-bg: linear-gradient(to bottom, darken($bg-color-inverse, 3%) 0%, $bg-color-inverse 50%, darken($bg-color-inverse, 3%) 100%);
$footer-color: $text-color-inverse;

/* Tabs */
$tab-group-bg: $panel-bg;
$tab-group-shadow: $nav-bar-shadow;
$tab-group-padding: $space-unit * 2;
$tab-group-margin: $space-unit * 4 0 0 0;

$tab-group-header-bg: $bg-color;
$tab-group-header-bg: $bg-color;
$tab-group-header-item-padding: $space-unit * 2;
$tab-group-header-item-hover-bg: $panel-bg;
$tab-group-header-item-hover-color: $text-color;

$tab-item-transition: transform $transition-duration linear;

/* CheckBox */
$checkbox-color: $text-color;
$checkbox-padding: 0;
$checkbox-margin: $space-unit 0;
$checkbox-size: $space-unit * 3;
$checkbox-bg: #FFF;
$checkbox-transition: background $transition-duration cubic-bezier(0, .84, .83, .67);
$checkbox-check: 2px solid #FFF;
$checkbox-check-margin: 0 $space-unit * 2 0 0;
$checkbox-checked-bg: $brand-accent;
$checkbox-shadow: -2px 2px 2px rgba(0, 0, 0, .24);

/* Tooltip */
$tooltip-bg: $brand-accent;
$tooltip-color: $bg-color;
$tooltip-padding: $space-unit / 2 $space-unit;
$tooltip-shadow: $panel-shadow;
$tooltip-highlight-color: $tooltip-bg;

/* Slider */
$slider-margin: 0;
$slider-padding: $space-unit * 3 $space-unit * 2;
$slider-track-bg: lighten($bg-color, 15%);
$slider-track-shadow: $panel-shadow;
$slider-progress-height: $space-unit * 0.5;
$slider-progress-bg: linear-gradient(to left, $brand-dark-primary 0%, $brand-accent 100%);
$slider-handle-size: $space-unit * 4;
$slider-handle-shadow: $panel-shadow;
$slider-handle-bg: $bg-color;
$slider-handle-border: 2px solid $brand-accent;
$slider-handle-transition: box-shadow $transition-duration / 2 ease-in-out;
$slider-handle-active-shadow: 0 0 0 8px rgba(red($brand-accent), green($brand-accent), blue($brand-accent), .5);
$slider-values-margin: 0 0 40px -16px;

/* Accordion */
$accordion-item-header-bg: $panel-bg;
$accordion-item-header-shadow: $panel-shadow;
$accordion-item-header-padding: $space-unit * 2;
$accordion-item-header-border-top: 1px solid lighten($bg-color, 10%);
$accordion-item-header-arrow-color: $brand-accent;
$accordion-item-body-padding: $accordion-item-header-padding;

/* Pagination */
$pagination-margin: 0 0 $space-unit * 4 0;
$pagination-padding: 0;
$pagination-label-padding: $space-unit * 2;
$pagination-label-min-width: $space-unit * 8;
$pagination-button-size: $space-unit * 7;
$pagination-button-bg: $panel-bg;
$pagination-button-shadow: $panel-shadow;
$pagination-arrow-color: $brand-accent;
$pagination-arrow-disabled-color: $bg-color;

/* Select */
$select-bg: $panel-bg;
$select-shadow: $panel-shadow;
$select-margin: 0 0 $space-unit * 2 0;
$select-padding: $space-unit * 2;
$select-border-top: $accordion-item-header-border-top;
$select-color: $text-color;
$select-font-size: inherit;
$select-arrow-color: $brand-accent;

$select-multi-max-height: $space-unit * 13;
$select-multi-option-padding: $space-unit * 0.5 0;

/* Calendar */
$calendar-max-width: $screen-phone;
$calendar-shadow: $panel-shadow;
$calendar-bg: $panel-bg;
$calendar-margin: 0 $space-unit * 2 $space-unit * 2 0;

$calendar-header-color: $text-color;
$calendar-header-padding: $space-unit * 2 $space-unit * 3;
$calendar-header-bg: linear-gradient(170deg, $brand-accent 0%, $brand-dark-primary 100%);
$calendar-header-text-shadow: 0 2px 5px rgba(0, 0, 0, .33);

$calendar-body-border: $accordion-item-header-border-top;
$calendar-body-padding: $space-unit * 2;

$calendar-arrow-color: $brand-accent;
$calendar-arrow-bg: $calendar-bg;
$calendar-arrow-hover-bg: $bg-color;

$calendar-day-border-radius: 50%;
$calendar-day-hover: $bg-color;

$calendar-current-day-bg: $brand-primary;
$calendar-current-day-color: $bg-color;

$calendar-selected-day-bg: $brand-accent;
$calendar-selected-day-color: $bg-color;

/* Notification Stack */
$notifications-index: $modal-index + 1;
$notifications-padding: $space-unit;
$notifications-max-width: $space-unit * 50;

$notification-padding: $space-unit * 2 $space-unit * 5 $space-unit * 2 $space-unit * 2;
$notification-margin: 0 0 $space-unit 0;
$notification-shadow: $modal-shadow;
$notification-max-height: $space-unit * 10;
$notification-close-bg: $bg-color;
$notification-close-width: $space-unit * 5;
$notification-close-cross-color: $brand-accent;

$notification-default-bg: $panel-bg;

/* Autocomplete */
$autocomplete-bg: $panel-bg;
$autocomplete-padding: 0;
$autocomplete-margin: -($space-unit * 5) 0 0 0;
$autocomplete-shadow: $panel-shadow;

$autocomplete-item-padding: $space-unit * 2;
$autocomplete-item-border: $calendar-body-border;
$autocomplete-item-selected-bg: lighten($autocomplete-bg, 5%);
$autocomplete-item-selected-color: $text-color;

/* Badge */
$badge-padding: $space-unit / 2 $space-unit * 2;
$badge-margin: 0;
$badge-font-size: 75%;
$badge-line-height: inherit;
$badge-letter-spacing: inherit;
$badge-border-radius: $space-unit / 4;

$badge-default-color: $button-default-color;
$badge-default-bg: $button-default-bg;

$badge-primary-color: $button-primary-color;
$badge-primary-bg: $button-primary-bg;

$badge-accent-color: $button-accent-color;
$badge-accent-bg: $button-accent-bg;

$badge-warn-color: $button-warn-color;
$badge-warn-bg: $button-warn-bg;

/* Carousel */
$carousel-min-height: 500px;
$carousel-copyright-color: $text-color;
$carousel-copyright-bottom: $space-unit * 2;
$carousel-copyright-left: $space-unit * 2;
$carousel-copyright-shadow: 0 0 3px $bg-color;
$carousel-copyright-font-size: 75%;
$carousel-indicator-bottom: 0;
$carousel-indicator-size: $space-unit;
$carousel-indicator-space: $space-unit;
$carousel-indicator-shadow: $panel-shadow;
$carousel-indicator-bg: $bg-color-inverse;
$carousel-indicator-active-bg: $brand-accent;

/* Toggle */
$toggle-bg: $panel-bg;
$toggle-shadow: $panel-shadow;
$toggle-border-radius: $space-unit * 3;
$toggle-width: $space-unit * 6;
$toggle-height: $space-unit * 1.5;
$toggle-transition: all $transition-duration ease-in-out;

$toggle-handle-border-radius: 50%;
$toggle-handle-size: $space-unit * 3;
$toggle-handle-bg: $bg-color-inverse;
$toggle-handle-shadow: $panel-shadow;
$toggle-handle-checked-bg: $brand-accent;
$toggle-handle-focused-shadow: $slider-handle-active-shadow;

$toggle-disabled-bg: $panel-bg;
$toggle-handle-disabled-bg: $divider-color;

/* Breadcrumb */
$breadcrumb-link-color: $brand-accent;
$breadcrumb-link-hover-color: darken($breadcrumb-link-color, 5%);
$breadcrumb-separator: "›";
